import "./index.css";

/**
 * React.FC会自动类型推断，并带上默认的children属性(v18后需要手动定义），和组件一些属性
 *
 * 设置默认值
 * 1. 解构方式,设置默认值
 * @param props
 * @returns
 */

interface CardProps1 {
  title?: string;
  subTitle?: string;
  content: string;
  children?: React.ReactNode; //手动声明children
}

export const Card: React.FC<CardProps1> = ({
  title = "默认标题",
  subTitle,
  content,
}) => {
  return (
    <div className="card">
      <header>
        <div>{title}</div>
        <div>{subTitle}</div>
      </header>
      <main>{content}</main>
      <footer>
        <button>确认</button>
        <button>取消</button>
      </footer>
    </div>
  );
};

/**
 * 2. 使用defaultProps
 * 使用defaultProps进行默认值赋值，最后把defaultProps 和 props 合并，
 * 注意顺序要先写defaultProps，
 * 再写props 因为props会覆盖defaultProps的值。
 *
 * Partial也要将属性定义非必填
 */

const defaultProps: Partial<CardProps1> = {
  title: "默认标题",
  subTitle: "默认子标题",
};

export const Card2: React.FC<CardProps1> = (props) => {
  console.log("props React.FC", props);
  const { title, subTitle, content } = { ...defaultProps, ...props };
  return (
    <div className="card">
      <header>
        <div>{title}</div>
        <div>{subTitle}</div>
      </header>
      <main>{content}</main>
      <footer>
        <button>确认</button>
        <button>取消</button>
      </footer>
    </div>
  );
};

export default Card;
